<template>
  <div class="ai-chat-container">
    <div class="chat-header">
      <h3>AI助手</h3>
      <div class="header-actions">
        <el-button
          size="small"
          type="primary"
          @click="sendCurrentQuestion"
          :disabled="isLoading"
        >
          <i class="el-icon-question"></i> 咨询当前题目
        </el-button>
        <el-button
          size="small"
          type="text"
          @click="clearConversation"
          :disabled="isLoading"
        >
          <i class="el-icon-delete"></i> 清空对话
        </el-button>
      </div>
    </div>

    <div class="chat-content">
      <div class="messages-container" ref="messagesContainer">
        <div
          v-for="(message, index) in messages"
          :key="index"
          :class="[
            'message',
            message.role === 'user' ? 'user-message' : 'ai-message',
          ]"
        >
          <div class="message-content" v-if="message.role === 'user'">
            {{ message.content }}
          </div>
          <div class="message-content" v-else>
            <div
              v-for="(part, pIndex) in formatAiMessage(message.content)"
              :key="pIndex"
              :class="[
                part.isPrompt ? 'clickable-prompt' : 'text-part',
                part.text === '<br>' ? 'line-break' : '',
              ]"
              @click="part.isPrompt ? handlePromptClick(part.text) : null"
              v-html="part.isPrompt ? part.text : part.text"
            ></div>
          </div>
        </div>
        <div v-if="isLoading" class="message ai-message">
          <div class="message-content">
            <span class="typing-indicator">{{ currentResponse }}</span>
          </div>
        </div>
      </div>

      <div class="input-container">
        <el-input
          v-model="userInput"
          placeholder="请输入问题..."
          :disabled="isLoading"
          @keyup.enter="sendMessage"
        >
          <template #append>
            <el-button
              :disabled="isLoading || !userInput.trim()"
              @click="sendMessage"
            >
              发送
            </el-button>
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, inject, computed } from "vue";
import aiApi from "@/api/ai/index";
import { useStore } from "vuex"; // Import Vuex store

// 尝试从父组件获取当前题目
const currentQuestion = inject("currentQuestion", null);

// Component state
const messages = ref([]);
const userInput = ref("");
const isLoading = ref(false);
const messagesContainer = ref(null);
const currentResponse = ref("");
const store = useStore(); // Use Vuex store to get user info

// 生成基于当前题目的欢迎信息
const generateWelcomeMessage = () => {
  try {
    // 尝试直接从父组件传入的数据获取题目信息
    // 由于我们无法直接访问父组件的item变量，因此需要从DOM获取
    const centerContent = document.querySelector(".center_content");
    if (!centerContent) return "你好，我是AI助手，有什么我可以帮助你的吗？";

    // 获取题目文本
    const questionElem = centerContent.querySelector(
      'div[style="margin-top: 5px; margin-bottom: 5px"]'
    );
    const questionText = questionElem ? questionElem.textContent : "";

    // 尝试获取选项内容
    // 单选选项
    const radioLabels = Array.from(
      centerContent.querySelectorAll(".el-radio__label")
    ).map((label) => label.textContent);

    // 多选选项
    const checkboxItems = [
      centerContent.querySelector('div[ref="check_item1"]'),
      centerContent.querySelector('div[ref="check_item2"]'),
      centerContent.querySelector('div[ref="check_item3"]'),
      centerContent.querySelector('div[ref="check_item4"]'),
    ]
      .filter(Boolean)
      .map((item) => item.textContent);

    // 使用找到的选项（优先使用单选，因为它们更容易获取）
    const options = radioLabels.length ? radioLabels : checkboxItems;

    if (questionText && options.length) {
      return `你好，我是AI助手，我可以帮助你解答题目问题。

当前题目：${questionText}

${options.length >= 1 ? options[0] : ""}
${options.length >= 2 ? options[1] : ""}
${options.length >= 3 ? options[2] : ""}
${options.length >= 4 ? options[3] : ""}

你可以问我关于这道题的问题，例如：
- 这道题为什么选A/B/C/D？
- 选项A/B/C/D为什么正确/错误？
- 这道题目考察的知识点是什么？`;
    }

    // 默认欢迎信息 - 不使用模板字符串，避免换行符处理问题
    return "你好，我是AI助手，我可以帮助你解答题目相关问题。\n\n你可以问我：\n- 这道题为什么选这个选项？\n- 哪个选项是正确的？为什么？\n- 这道题考察的知识点是什么？";
  } catch (error) {
    console.error("Error generating welcome message:", error);
    return "你好，我是AI助手，有什么我可以帮助你的吗？";
  }
};

// 格式化AI消息，将欢迎信息中的提示词解析为可点击部分和普通文本部分
const formatAiMessage = (content) => {
  if (!content) return [];

  // 转义HTML字符以防止XSS
  const escapeHtml = (text) => {
    if (!text) return "";
    return text
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#039;");
  };

  // 检查是否是欢迎消息
  const isWelcomeMessage = content.startsWith("你好，我是AI助手");

  // 如果不是欢迎消息，就直接返回普通文本
  if (!isWelcomeMessage) {
    return [
      {
        isPrompt: false,
        text: escapeHtml(content).replace(/\n/g, "<br>"),
      },
    ];
  }

  // 如果是欢迎消息，解析成不同部分
  const parts = [];
  const lines = content.split("\n");

  for (let i = 0; i < lines.length; i++) {
    const line = lines[i];

    if (!line || line.trim() === "") {
      parts.push({
        isPrompt: false,
        text: "<br>",
      });
      continue;
    }

    // 检查是否是提示词行 (以"- "开头)
    if (line.trim().startsWith("- ")) {
      parts.push({
        isPrompt: true,
        text: line.trim(),
      });
    } else {
      // 添加普通文本行
      parts.push({
        isPrompt: false,
        text: escapeHtml(line),
      });
    }
  }

  return parts;
};

// 处理提示词点击
const handlePromptClick = (prompt) => {
  if (isLoading.value) return;

  userInput.value = prompt;
  sendMessage();
};

// 初始化欢迎信息
onMounted(() => {
  // 延迟一点点，等待DOM完全渲染
  setTimeout(() => {
    // 尝试获取当前题目信息
    try {
      console.log("组件挂载完成，尝试获取题目信息");
      const welcomeMessage = generateWelcomeMessage();
      messages.value = [{ role: "assistant", content: welcomeMessage }];
      scrollToBottom();
    } catch (error) {
      console.error("初始化欢迎信息时出错:", error);
      messages.value = [
        {
          role: "assistant",
          content: "你好，我是AI助手，有什么我可以帮助你的吗？",
        },
      ];
    }
  }, 300);
});

// 监听题目变化的更高效方法
onMounted(() => {
  // 设置MutationObserver来监听题目变化
  const questionObserver = new MutationObserver((mutations) => {
    console.log("检测到DOM变化，可能是题目已更新");

    // 如果对话刚开始（消息少于3条），重新生成欢迎信息
    if (messages.value.length <= 2) {
      try {
        const welcomeMessage = generateWelcomeMessage();
        if (welcomeMessage && messages.value.length > 0) {
          messages.value[0].content = welcomeMessage;
        }
      } catch (error) {
        console.error("更新欢迎信息时出错:", error);
      }
    }
  });

  // 监听整个内容区域的变化
  const content = document.querySelector(".center_content");
  if (content) {
    questionObserver.observe(content, {
      childList: true,
      subtree: true,
      characterData: true,
    });
    console.log("已设置题目变化监听器");
  } else {
    console.log("无法找到.center_content元素，无法监听题目变化");

    // 如果找不到，尝试监听整个页面的变化
    const learnContainer = document.querySelector(".learn-container");
    if (learnContainer) {
      questionObserver.observe(learnContainer, {
        childList: true,
        subtree: true,
      });
      console.log("已设置页面整体变化监听器");
    }
  }
});

// Clear the conversation history
const clearConversation = async () => {
  try {
    // Get user ID for conversation caching if available
    const userId = store.getters.userId || localStorage.getItem("userId");

    if (userId) {
      // Call API to clear server-side cache
      await aiApi.clearConversation(userId);
    }

    // Reset local messages with updated welcome message
    messages.value = [{ role: "assistant", content: generateWelcomeMessage() }];

    // Scroll to bottom
    scrollToBottom();
  } catch (error) {
    console.error("Error clearing conversation:", error);
    // Add an error message
    messages.value.push({
      role: "assistant",
      content: "清空对话失败，请稍后再试。",
    });
  }
};

// 获取当前的题目上下文
const getCurrentQuestionContext = () => {
  try {
    // 首先尝试直接访问Vue组件中的数据
    // 但由于我们是单独的组件，无法直接访问，所以从DOM获取

    // 获取题目文本 - 第一种方法（先获取题目本身）
    let questionText = "";
    const questionDiv = document.querySelector(
      '.center_content > div[style*="margin-top: 5px"]'
    );
    if (questionDiv) {
      questionText = questionDiv.textContent.trim();
      console.log("找到题目:", questionText);
    } else {
      console.log("无法通过样式获取题目");
    }

    // 如果第一种方法失败，尝试其他选择器
    if (!questionText) {
      const allDivs = document.querySelectorAll(".center_content > div");
      if (allDivs.length > 0) {
        questionText = allDivs[0].textContent.trim();
        console.log("使用备用方法找到题目:", questionText);
      }
    }

    // 获取选项 - 先尝试获取单选框
    let options = [];
    const radioGroup = document.querySelector(".el-radio-group");
    if (radioGroup) {
      const radioButtons = radioGroup.querySelectorAll(".el-radio");
      console.log("找到单选框数量:", radioButtons.length);

      for (let i = 0; i < radioButtons.length; i++) {
        const label = radioButtons[i].querySelector(".el-radio__label");
        if (label) {
          options.push(label.textContent.trim());
        }
      }
    } else {
      console.log("未找到单选框组");
    }

    // 如果没有单选框，尝试多选框
    if (!options.length) {
      const checkboxGroup = document.querySelector(".el-checkbox-group");
      if (checkboxGroup) {
        const checkboxes = checkboxGroup.querySelectorAll(".el-checkbox");
        console.log("找到多选框数量:", checkboxes.length);

        for (let i = 0; i < checkboxes.length; i++) {
          const label = checkboxes[i].querySelector(".el-checkbox__label");
          if (label) {
            options.push(label.textContent.trim());
          }
        }
      } else {
        console.log("未找到多选框组");
      }
    }

    // 如果通过上面的方法没有找到选项，尝试直接获取特定引用
    if (!options.length) {
      const optionItems = document.querySelectorAll(".option-item");
      console.log("找到选项项数量:", optionItems.length);

      for (const item of optionItems) {
        const labelContent = item.textContent?.trim();
        if (labelContent) {
          options.push(labelContent);
        }
      }
    }

    // 尝试获取解析
    let explanationText = "";
    const remarkDivs = document.querySelectorAll(".center_content > div > div");
    for (const div of remarkDivs) {
      if (div.textContent.includes("答案解析")) {
        if (div.nextElementSibling) {
          explanationText = div.nextElementSibling.textContent.trim();
          console.log("找到解析:", explanationText);
          break;
        }
      }
    }

    // 如果解析没找到，尝试找显示中的解析
    if (!explanationText) {
      const visibleRemark = document.querySelector('div[v-show="showRemark"]');
      if (visibleRemark && visibleRemark.style.display !== "none") {
        explanationText = visibleRemark.textContent.trim();
        console.log("找到可见解析:", explanationText);
      }
    }

    // 构建上下文信息
    if (!questionText && !options.length) {
      console.log("未能找到题目信息");
      return "";
    }

    let contextMsg = "";

    if (questionText) {
      // 去掉题目前面的数字编号（如 "1."）
      questionText = questionText.replace(/^\d+\.\s*/, "");
      contextMsg += `当前题目：${questionText}\n\n`;
    }

    for (let i = 0; i < options.length; i++) {
      contextMsg += `${options[i]}\n`;
    }

    if (explanationText) {
      contextMsg += `\n解析：${explanationText}\n`;
    }

    console.log("生成的题目上下文:", contextMsg);
    return contextMsg;
  } catch (error) {
    console.error("Error getting question context:", error);
    return "";
  }
};

// 向AI助手发送当前题目信息并请求解析
const sendCurrentQuestion = async () => {
  if (isLoading.value) return;

  // 获取当前题目信息
  const questionContext = getCurrentQuestionContext();
  if (!questionContext) {
    messages.value.push({
      role: "assistant",
      content: "未能获取到当前题目信息，请确保有题目正在显示。",
    });
    return;
  }

  // 将题目信息作为用户消息发送
  const userMessage =
    "请详细解析这道题目，分析各个选项的正确性，并说明应该选择哪个选项。";
  messages.value.push({ role: "user", content: userMessage });
  isLoading.value = true;
  currentResponse.value = "";

  // 滚动到底部
  await scrollToBottom();

  try {
    // 准备历史记录
    const history = messages.value
      .slice(0, -1) // 排除最新用户消息
      .map((msg) => ({
        role: msg.role,
        content: msg.content,
      }));

    // 获取用户ID
    const userId = store.getters.userId || localStorage.getItem("userId");

    // 准备增强的提示
    const enhancedPrompt = `${questionContext}\n\n请详细解析这道题目，分析各个选项的正确性，并说明应该选择哪个选项。`;

    console.log("Asking for question analysis:", enhancedPrompt);

    // 调用AI服务
    aiApi.streamChat(
      enhancedPrompt,
      history,
      userId,
      (content) => {
        // 检查content是否为JSON对象字符串，如果是则解析并提取content属性
        if (
          typeof content === "string" &&
          content.trim().startsWith("{") &&
          content.includes('"content"')
        ) {
          try {
            const parsedContent = JSON.parse(content);
            if (parsedContent && parsedContent.content) {
              currentResponse.value = parsedContent.content;
            } else {
              currentResponse.value = content; // 如果解析后没有content属性，使用原始内容
            }
          } catch (e) {
            // 如果解析失败，使用原始内容
            currentResponse.value = content;
          }
        } else {
          // 如果不是JSON对象字符串，直接使用
          currentResponse.value = content;
        }
        scrollToBottom();
      },
      (finalContent) => {
        if (!finalContent) {
          finalContent =
            currentResponse.value || "抱歉，发生了错误，无法提供完整解析";
        }
        messages.value.push({ role: "assistant", content: finalContent });
        currentResponse.value = "";
        isLoading.value = false;
        scrollToBottom();
      },
      (error) => {
        console.error("Error in AI response:", error);
        handleAiError(enhancedPrompt, history, userId, error);
      }
    );
  } catch (error) {
    console.error("Error sending question analysis request:", error);
    messages.value.push({
      role: "assistant",
      content: "抱歉，发送题目解析请求时出错: " + (error.message || "未知错误"),
    });
    isLoading.value = false;
    scrollToBottom();
  }
};

// 处理AI响应错误的通用函数
const handleAiError = (prompt, history, userId, error) => {
  // 记录详细错误信息
  console.error("AI响应错误:", error);
  console.error("错误类型:", error.name);
  console.error("错误消息:", error.message);
  console.error("错误堆栈:", error.stack);

  // 检查是否是JSON解析错误
  const isJsonError =
    error.message &&
    (error.message.includes("JSON.parse") ||
      error.message.includes("unexpected end") ||
      error.message.includes("Unexpected token"));

  try {
    // 显示正在尝试备用方法
    messages.value.push({
      role: "assistant",
      content: "连接AI服务出现问题，正在尝试备用方式...",
    });
    scrollToBottom();

    // 如果是JSON解析错误，可能是服务器响应格式问题
    if (isJsonError) {
      console.log("检测到JSON解析错误，尝试使用非流式API");
    }

    // 使用非流式API作为备用
    aiApi
      .chatWithAi(prompt, history, userId)
      .then((response) => {
        if (response && response.data && response.data.content) {
          // 替换"尝试替代方案"消息
          messages.value.pop();
          messages.value.push({
            role: "assistant",
            content: response.data.content,
          });
        } else {
          // 如果响应格式不符预期，替换为错误消息
          messages.value.pop();
          messages.value.push({
            role: "assistant",
            content:
              "抱歉，我遇到了一些问题，请稍后再试。服务器返回了不符合预期的格式。",
          });
        }
      })
      .catch((backupError) => {
        console.error("备用通信方法也失败:", backupError);

        // 更新"尝试替代方案"消息
        messages.value.pop();

        // 构建更友好的错误消息
        let errorMsg = "抱歉，AI服务暂时不可用，请稍后再试。";

        if (isJsonError) {
          errorMsg += "\n\n可能是服务器返回了不正确的数据格式。";
        } else if (
          backupError.message &&
          backupError.message.includes("Network Error")
        ) {
          errorMsg += "\n\n网络连接问题，请检查您的网络连接或服务器状态。";
        } else if (backupError.response && backupError.response.status) {
          errorMsg += `\n\n服务器返回状态码: ${backupError.response.status}`;
          if (backupError.response.data && backupError.response.data.message) {
            errorMsg += ` - ${backupError.response.data.message}`;
          }
        } else {
          errorMsg += `\n\n错误详情: ${backupError.message || "未知错误"}`;
        }

        messages.value.push({
          role: "assistant",
          content: errorMsg,
        });
      })
      .finally(() => {
        isLoading.value = false;
        currentResponse.value = "";
        scrollToBottom();
      });
  } catch (fallbackError) {
    console.error("备用方法异常:", fallbackError);

    // 替换当前错误消息
    if (messages.value[messages.value.length - 1].role === "assistant") {
      messages.value.pop();
    }

    messages.value.push({
      role: "assistant",
      content:
        "抱歉，AI服务遇到了严重问题，请刷新页面或稍后再试。如果问题持续存在，请联系管理员。",
    });
    isLoading.value = false;
    currentResponse.value = "";
    scrollToBottom();
  }
};

// Send a message to the AI
const sendMessage = async () => {
  const userMessage = userInput.value.trim();
  if (!userMessage || isLoading.value) return;

  // Add user message to chat
  messages.value.push({ role: "user", content: userMessage });
  userInput.value = "";
  isLoading.value = true;
  currentResponse.value = "";

  // Scroll to bottom
  await scrollToBottom();

  try {
    // Format history for API
    const history = messages.value
      .slice(0, -1) // Exclude the latest user message
      .map((msg) => ({
        role: msg.role,
        content: msg.content,
      }));

    // Get user ID for conversation caching if available
    const userId = store.getters.userId || localStorage.getItem("userId");

    // 获取当前题目上下文并添加到提示中
    const questionContext = getCurrentQuestionContext();

    // 检测问题是否是关于当前题目的一般性问题
    const isGeneralQuestionAboutCurrentQuestion =
      /这道题|这个题|当前题|这题|选哪个|哪个选项|答案是什么|为什么选/.test(
        userMessage
      );

    // 如果是关于当前题目的问题，且我们有题目上下文，则添加上下文
    let enhancedPrompt = userMessage;
    if (questionContext && isGeneralQuestionAboutCurrentQuestion) {
      enhancedPrompt = `${questionContext}\n\n用户问题：${userMessage}`;
      console.log("添加题目上下文到用户问题");
    } else {
      console.log("不添加题目上下文，使用原始问题");
    }

    console.log("Starting AI chat with prompt:", enhancedPrompt);
    console.log("Chat history:", history);
    console.log("User ID for caching:", userId);

    aiApi.streamChat(
      enhancedPrompt,
      history,
      userId, // Pass userId for caching
      (content) => {
        // Update current response as it streams in
        // 检查content是否为JSON对象字符串，如果是则解析并提取content属性
        if (
          typeof content === "string" &&
          content.trim().startsWith("{") &&
          content.includes('"content"')
        ) {
          try {
            const parsedContent = JSON.parse(content);
            if (parsedContent && parsedContent.content) {
              currentResponse.value = parsedContent.content;
            } else {
              currentResponse.value = content; // 如果解析后没有content属性，使用原始内容
            }
          } catch (e) {
            // 如果解析失败，使用原始内容
            currentResponse.value = content;
          }
        } else {
          // 如果不是JSON对象字符串，直接使用
          currentResponse.value = content;
        }
        scrollToBottom();
      },
      (finalContent) => {
        // Add complete response to messages
        console.log("Chat complete, final content:", finalContent);
        if (!finalContent) {
          // Handle case where finalContent is missing
          finalContent =
            currentResponse.value || "抱歉，发生了错误，无法提供完整回复";
        }
        messages.value.push({ role: "assistant", content: finalContent });
        currentResponse.value = "";
        isLoading.value = false;
        scrollToBottom();
      },
      (error) => {
        console.error("Error in AI response:", error);
        handleAiError(enhancedPrompt, history, userId, error);
      }
    );
  } catch (error) {
    console.error("Error sending message:", error);
    messages.value.push({
      role: "assistant",
      content: "抱歉，发送信息时出错: " + (error.message || "未知错误"),
    });
    isLoading.value = false;
    scrollToBottom();
  }
};

// Scroll chat to the bottom
const scrollToBottom = async () => {
  await nextTick();
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
  }
};

// Watch for changes to messages and scroll to bottom
watch(
  messages,
  () => {
    scrollToBottom();
  },
  { deep: true }
);

// Initialize component
onMounted(() => {
  scrollToBottom();

  // 使聊天框可拖动
  const chatHeader = document.querySelector(".chat-header");
  const chatContainer = document.querySelector(".ai-chat-wrapper");

  if (chatHeader && chatContainer) {
    let isDragging = false;
    let offsetX, offsetY;

    chatHeader.addEventListener("mousedown", (e) => {
      isDragging = true;
      offsetX = e.clientX - chatContainer.getBoundingClientRect().left;
      offsetY = e.clientY - chatContainer.getBoundingClientRect().top;

      // 防止文本选择
      e.preventDefault();
    });

    document.addEventListener("mousemove", (e) => {
      if (!isDragging) return;

      // 设置新位置
      const x = e.clientX - offsetX;
      const y = e.clientY - offsetY;

      // 确保不超出窗口边界
      const maxX = window.innerWidth - chatContainer.offsetWidth;
      const maxY = window.innerHeight - chatContainer.offsetHeight;

      chatContainer.style.left = `${Math.max(0, Math.min(x, maxX))}px`;
      chatContainer.style.right = "auto";
      chatContainer.style.top = `${Math.max(0, Math.min(y, maxY))}px`;
      chatContainer.style.bottom = "auto";
    });

    document.addEventListener("mouseup", () => {
      isDragging = false;
    });
  }
});
</script>

<style scoped>
.ai-chat-container {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 100%; /* 使用100%父容器高度 */
  position: relative; /* 使子元素定位相对于此容器 */
  display: flex;
  flex-direction: column;
  height: 100%; /* 填充整个容器高度 */
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e8e8e8;
  position: sticky; /* 固定在顶部 */
  top: 0;
  z-index: 10;
  cursor: move; /* 添加可拖动指示 */
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-header h3 {
  margin: 0;
  color: #409eff;
  user-select: none; /* 防止拖动时选中文本 */
}

.chat-header button {
  color: #909399;
  font-size: 12px;
}

.chat-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden; /* 防止内容溢出 */
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center; /* 让消息框水平居中 */
}

.message {
  width: 90%; /* 消息框占据容器的90%宽度 */
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 8px;
  word-break: break-word;
}

.user-message {
  align-self: flex-end;
  background-color: #ecf5ff;
  color: #303133;
}

.ai-message {
  align-self: flex-start;
  background-color: #f5f7fa;
  color: #303133;
  align-self: center; /* 让AI消息水平居中 */
}

.message-content {
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 添加可点击提示词的样式 */
.clickable-prompt {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 4px;
  transition: all 0.3s;
  margin: 4px 0;
  display: block;
}

.clickable-prompt:hover {
  background-color: #ecf5ff;
  box-shadow: 0 0 2px rgba(64, 158, 255, 0.5);
}

.text-part {
  margin: 2px 0;
  line-height: 1.5;
}

.line-break {
  height: 8px;
}

.input-container {
  padding: 15px;
  border-top: 1px solid #e8e8e8;
  position: sticky; /* 固定在底部 */
  bottom: 0;
  background-color: #fff;
  z-index: 10;
}

.typing-indicator {
  display: inline-block;
}

@keyframes blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.typing-indicator::after {
  content: "|";
  animation: blink 1s infinite;
  margin-left: 3px;
}
</style>
